// 轮播图
const obanner=document.getElementById("banner");
const oimg=obanner.querySelectorAll("ul li");
const obtns=obanner.querySelectorAll("ol li");
const goP=document.querySelector("#goPrev");
const goN=document.querySelector("#goNext");

var index=0;
//当前图片的下标，默认为0；
var lastIndex=null;
//上一张图片的下标。默认为0；

var timer=null;
//按钮切换

Array.from(obtns).forEach((btn,i)=>{
    btn.onclick=function(){
        //上一张图片去掉ac，给当前图片加上ac
        //index的值更新为当前点击按钮的下标
        //把index先变成lastIndex，然后把index赋为当前的i；
        lastIndex=index;
        index=i;
        change();
    }
})
//向后切换
goN.onclick=function(){
    lastIndex=index;
    index++;
    //index的范围取值只能是0~length-1，一但等于length，就回到0；
    if(index===oimg.length)
        index=0;
    change();
}
//向前切换
goP.onclick=function(){
    lastIndex=index;
    index--;
    if(index<0)
        index=oimg.length-1;
        change();
}
//自动切换
autoPlay();
//先自动用一次，默认先自动播放起来

function autoPlay(){
    timer=setInterval(() => {
        goN.onclick();
    }, 3000);
}

obanner.onmouseenter=function(){
    clearInterval(timer);
}
obanner.onmouseleave=function(){
    autoPlay();
}
function change(){
    oimg[lastIndex].classList.remove("ac");
    //去除ac
    oimg[index].classList.add("ac");
    //添加ac
    obtns[lastIndex].classList.remove("ac");
    obtns[index].classList.add("ac");
}

// 购物袋下拉
const oli=document.getElementById("shangdian");
const oul=document.querySelector(".gouwudai-xiala"); 
var i=0;
oli.onclick=function(eve){
    let e=eve||window.event;
    stopBubble(e);
   
    if(i==0){
        oul.style.display="block";
        i=1;
    }else{
        oul.style.display="none";
        i=0;
    }
    document.onclick=function(){
    oul.style.display="none";
    i=0;
    }

}
// 阻止事件冒泡，兼容封装
function stopBubble(e){
    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBubble=true;
    }
}


